<template>
	<view class="userinfo-content">
		<uni-forms ref="baseForm" :rules="baseInfoRules" :modelValue="baseInfo" :label-width='75'>
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms-item label="昵称" required name="nickname">
					<uni-easyinput v-model="baseInfo.nickname" placeholder="网名抖音/快手名称" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required name="phone">
					<uni-easyinput v-model="baseInfo.phone" placeholder="15888888" />
				</uni-forms-item>
				<uni-forms-item label="年龄" required name="age">
					<uni-datetime-picker placeholder="请选择年龄" @change="hangdChange" type="date" v-model="baseInfo.age"
						start="1970-1-01" end="2030-1-01" />
				</uni-forms-item>
				<uni-forms-item label="性别" required name="sex">
					<uni-data-checkbox v-model="baseInfo.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="身高">
					<view class="flx-auto">
						<uni-easyinput v-model="baseInfo.height" type='number' placeholder="请输入身高" />
						<view>厘米</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="体重">
					<view class="flx-auto">
						<uni-easyinput v-model="baseInfo.kg" type='number' placeholder="请输入体重" />
						<view>公斤</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="目前状况" required name="currnetMarryHistry">
					<uni-data-checkbox v-model="baseInfo.currnetMarryHistry" :localdata="marryHistryItem" />
				</uni-forms-item>

				<uni-forms-item label="出生地址" required name="adress">
					<uni-data-picker placeholder="请选择地址" v-model="baseInfo.adress" @change="handChangeAdress"
						popup-title="请选择所在地区" :preload="true" :step-searh="true" self-field="code"
						parent-field="parent_code" collection="mintz-city-data" orderby="value asc"
						field="code as value, name as text, eq(['$type', 4]) as isleaf" ellipsis>
					</uni-data-picker>
				</uni-forms-item>

				<uni-forms-item label="工作地址">
					<uni-data-picker placeholder="请选择地址" @change="handChangeWorkAdressList"
						v-model="baseInfo.workAdress" popup-title="请选择所在地区" :preload="true" :step-searh="true"
						self-field="code" parent-field="parent_code" collection="mintz-city-data" orderby="value asc"
						field="code as value, name as text, eq(['$type', 4]) as isleaf" ellipsis>
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="自我介绍" required name="selfdesc">
					<uni-easyinput type="textarea" v-model="baseInfo.selfdesc" placeholder="请输入自我介绍" />
				</uni-forms-item>

			</view>
			<view class="unisection">
				<view></view>
				<view>其他信息</view>
			</view>

			<uni-forms-item label="学历">
				<uni-data-select v-model="baseInfo.education" :localdata="shcoolList"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="职位" required name="staff">
				<uni-data-select v-model="baseInfo.staff" placeholder="目前是干什么的"
					:localdata="staffList"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="工作性质">
				<uni-data-select v-model="baseInfo.staffxz" placeholder="" :localdata="staffxzList"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="年收入" required name="incoom">
				<view class="flx-auto">
					<uni-easyinput v-model="baseInfo.incoom" type='number' placeholder="如:10-20" />
					<view>万</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="是否有五险一金">
				<uni-data-checkbox v-model="baseInfo.haveinsure" :localdata="noHave" />
			</uni-forms-item>
			<view class="unisection">
				<view></view>
				<view>加分项目</view>
			</view>
			<uni-forms-item label="有无房子">
				<uni-data-select v-model="baseInfo.havehouse" :localdata="noHave"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="有无车子">
				<uni-data-select v-model="baseInfo.haveCar" :localdata="noHave"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="有无贷款">
				<uni-data-select v-model="baseInfo.havehouseMoney" :localdata="noHave"></uni-data-select>
			</uni-forms-item>
		</uni-forms>

	</view>
</template>


<script setup lang="ts">
	import { ref } from 'vue';
	import emun from '../../../../utils';
	import dayjs from 'dayjs';
	const baseForm = ref()
	const hangdChange = (e) => {
		baseInfo.value.age = e
	}
	const baseInfo = ref({
		nickname: '',
		phone: '15888888888',
		age: '1995-12-12',
		sex: 1,
		height: '',
		adress: '',
		adressList: [],
		workAdress: '',
		workAdressList: [],
		kg: '',
		currnetMarryHistry: 0,
		selfdesc: "",
		education: '',
		staff: '',
		staffxz: '',
		incoom: '',
		haveinsure: '',
		havehouse: '',
		haveCar: '',
		havehouseMoney: ''
	})
	const handChangeAdress = (e) => {
		baseInfo.value.adressList = e.detail.value
	}
	const handChangeWorkAdressList = (e) => {
		baseInfo.value.workAdressList = e.detail.value
	}
	const baseInfoRules = {
		nickname: {
			rules: [{
				required: true,
				errorMessage: '昵称不能为空'
			}]
		},
		phone: {
			rules: [{
				required: true,
				errorMessage: '手机号不能为空'
			},
			{
				validateFunction: function (rule, value, data, callback) {
					let iphoneReg = /^1[0-9]{10}$/
					if (!iphoneReg.test(value)) {
						callback('手机号码格式不正确，请重新填写')
					}
					return true
				}

			}
			]
		},
		age: {
			rules: [{
				required: true,
				errorMessage: '年龄不能为空'
			}]
		},
		adress: {
			rules: [{
				required: true,
				errorMessage: '出生地址不能为空'
			}]
		},
		selfdesc: {
			rules: [{
				required: true,
				errorMessage: '自我介绍不能为空'
			}]
		},
		staff: {
			rules: [{
				required: true,
				errorMessage: '职位不能为空'
			}]
		},
		incoom: {
			rules: [{
				required: true,
				errorMessage: '年收入不能为空'
			}]
		}
	}
	const commitData = () => {
		return new Promise((resolve, reject) => {
			baseForm.value.validate().then(res => {
				resolve(baseInfo)
			}).catch(err => {
				reject(err)
			})
		});

	}
	defineExpose({
		commitData,
		baseInfo
	})
	const noHave = ref(emun.noHave)
	const sexs = ref(emun.sexs)
	const marryHistryItem = ref(emun.marryHistryItem)
	const houseList = ref(emun.noHave)
	const shcoolList = ref(emun.shcoolList)
	const staffxzList = ref(emun.staffxzList)
	const staffList = ref(emun.staffList)
</script>

<style lang="scss" scoped>
	.userinfo-content {
		padding: 48rpx 32rpx;

		.unisection {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 12px 10px;
			font-weight: normal;
			font-size: 28rpx;
			background: #eee;
			margin-bottom: 20px;
			padding-left: 8rpx;

		}
	}
</style>